<script lang="ts" setup>
	import { getCurrentInstance, ref } from 'vue'
	import { onPageScroll, onReady } from '@dcloudio/uni-app'
	import { useBrandIntroduction } from './composables'
	import { useScrollUpdownBottomContent } from '@/hooks'

	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	// 翻译事件引入
	var plugin = requirePlugin("WechatSI")
	let manager = plugin.getRecordRecognitionManager()


	const text = ref<string>('开始录音')
	const voicePath = ref<string>('')
	const shows = ref<boolean>('')
	const animation = ref<boolean>('')
	const voiceState = ref<string>('点击录音进行翻译')
	const endOne = ref<string>('')
	const num = ref<number>(1)

	const {
		instance,
		initTransparentScroll,
		opacityScrollHandle,
		navProblemDetail,
		handleGetData,
		handleSetVal
	} = useBrandIntroduction()

	const { style: authInfoScrollStyle, scrollHandle: authInfoScrollHandle } =
		useScrollUpdownBottomContent('up', 80)

	onReady(() => {
		initTransparentScroll()
	})
	onPageScroll((e) => {
		opacityScrollHandle(e.scrollTop)
		authInfoScrollHandle(instance, e.scrollTop)
	})
	const startRecord = () => {
		console.log('开始录音');
		manager.start({
			duration: 30000,
			lang: "zh_CN"
		})
		text.value = '松手上传';
		animation.value = true
	}
	const endRecord = () => {
		console.log('录音结束222');
		text.value = '开始录音';
		animation.value = false
		shows.value = true
		manager.stop();
	}

	const playVoice = () => {
		console.log('播放录音', voicePath.value);
		if (voicePath.value) {
			innerAudioContext.src = voicePath.value;
			innerAudioContext.play();
		}
	}
	const resetVoice = () => {
		console.log('重置录音');
		innerAudioContext.stop();
		shows.value = false
		voicePath.value = '';
		endOne.value = ''
		voiceState.value = ''
		num.value = 1
	}
	const fanyi = () => {
		if (num.value == 1) {
			endOne.value = voiceState.value
			skvido(voiceState.value)
			num.value = num.value + 1
			uni.showToast({
				title: '转换成功',
				icon: 'success',
				duration: 2000, //持续时间为 2秒
			})
		} else {
			uni.showToast({
				title: '文字已翻译，请勿重复点击',
				icon: 'error',
				duration: 2000, //持续时间为 2秒
			})
		}
	}
	const initRecord = () => {
		manager.onStart = function (res) {
			console.log("7777")
			voiceState.value = "onStart:" + res.msg + "正在录音"
		};
		//有新的识别内容返回，则会调用此事件
		manager.onRecognize = (res) => {
			console.log("8888")
			voiceState.value = res.result;
		}
		// 识别结束事件
		manager.onStop = (res) => {
			voicePath.value = res.tempFilePath;
			voiceState.value = res.result;
			console.log("9999")
			if (voiceState.value == '') {
				console.log('没有说话')
				endOne.value = '周围太安静啦~再试试~';
			}
		}

		// 识别错误事件
		manager.onError = (res) => {
			voiceState.value = '翻译员去吃饭啦，等下再试试';
			shows.value = false
			uni.showToast({
				title: '翻译员去吃饭啦，等下再试试',
				icon: 'error',
				duration: 2000, //持续时间为 2秒
			})
		}
	}
	
	initRecord()
	// 转化为英文
	const skvido = (str:any) => {
		plugin.textToSpeech({
			lang: "zh_CN",
			tts: true,
			content: str,
			success: function (res : { filename : string; }) {
				console.log(res, "fefefe")
				// console.log("succ tts", res.filename)   
				let music = null;
				music = uni.createInnerAudioContext(); //创建播放器对象
				music.src = res.filename;
				music.play(); //执行播放
				music.onEnded(() => {
					//播放结束
					music = null;
				});
			},
			fail: function (res) {
				// console.log("fail tts", res)
			}
		})
	}
</script>

<template>
	<template>
		<view>
			<!-- 语音识别区 -->
			<!-- 语音内容图片+转文字，没有语音时是隐藏状态 -->
			<view class="content" v-if="shows">
				<!-- 语音声纹图片 -->
				<view class="tet" style="position: relative;margin-top:300px">
					<view
						style="position: absolute;width: 30px;height: 30px;background-color: #e9c2db;right: 0;border-radius: 50%;top: 10px;"
						:class="num == 1 ? '' : 'op'">
						<!-- 转文字按钮  fanyi为转译事件 -->
						<image style="width: 30px;height: 30px;"
							src="https://pic.imgdb.cn/item/64c85b431ddac507cc0e7284.png" @tap="fanyi"></image>
					</view>
				</view>
				<!-- 翻译内容点击fanyi后出现 -->
				<view class="voicepad"
					style="margin-top: 20px;width: 94%;margin-left: 3%;padding: 10px; font-size: 12px;">
					{{endOne}}
				</view>
			</view>
			<!-- 语音音阶动画 长按说话时的动画 -->
			<view class="prompt" v-if="animation">
				<section class="dots-container">
					<view class="dot"></view>
					<view class="dot"></view>
					<view class="dot"></view>
					<view class="dot"></view>
					<view class="dot"></view>
				</section>
				<text>录音中...</text>
			</view>
			<!-- 按钮功能区 -->
			<view class="action" v-show="!shows">
				<button @longpress="startRecord" @touchend="endRecord" @tap="startRecord">{{text}}</button>
			</view>
			<view class="actioning" v-show="shows">
				<button @tap="playVoice" style="background-color: #d1f2d7;color: #18bc37;">播放录音</button>
				<button @tap="resetVoice" style="background-color: #fdedd9;color: #f3a73f;">重置录音</button>
			</view>

		</view>
	</template>
</template>

<style lang="scss" scoped>
	@import './styles/index.scss';
</style>